<template>
    <div class="tab-nav"
         v-tab-current="{
        curIdx,
        className: 'nav-item',
        currentClassName: 'nav-current'}">
        <item v-for="(item, index) of navData"
              :key="index"
              :index="index"
              :item="item"
              @changeTabIndex="changeTabIndex">
        </item>
    </div>
</template>

<script>
    import Item from './Item';
    import tabCurrent from '../directives/tabCurrent'

    export default {
        name: "NavBar",
        props: {
            navData: Array,
            curIdx: Number
        },
        components: {
            Item
        },
        directives: {
            tabCurrent
        },
        data() {
            return {};
        },
        methods: {
            changeTabIndex(index) {
                this.$emit('changeTabIndex', index);
            }
        }
    }
</script>

<style scoped>
    .tab-nav {
        height: 50px;
        border-bottom: olivedrab solid 1px;
    }
</style>